<template>
  <el-aside class="left">
    <el-menu router>
      <template v-for="v in items" :key="v.url">
        <el-sub-menu v-if="v.children">
          <template #title>
            <el-icon><component :is="v.icon"></component></el-icon>{{v.name}}
          </template>
          <el-menu-item v-for="vitem in v.children" :key="vitem.url" :index="vitem.url">
            <template #title>
              <el-icon><component :is="vitem.icon"></component></el-icon>{{vitem.name}}
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="v.url">
          <template #title>
            <el-icon><component :is="v.icon"></component></el-icon>{{v.name}}
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>
<script setup>
import {ref,reactive} from 'vue'
import { Menu as IconMenu, Message, Setting,AddLocation,Histogram,QuestionFilled,Operation} from '@element-plus/icons-vue'

const items = reactive([
  {
    name:"人员管理",
    url:"/index",
    icon:IconMenu,
  },
  {
    name:"签到发布",
    url:"/qd",
    icon:AddLocation
  },
  {
    name:"设置",
    url:"/",
    icon:Setting,
    children:[
      {
        name:'产品说明',
        url:"/Sm",
        icon:QuestionFilled
      },
      {
        name:"退出登录",
        url:"/",
        icon:Operation
      }
    ]
  },
  {},{}, {}, {}, {},{},{}, {}, {}, {}
])
</script>

<style scoped>
.left{
  width:200px;
  top:80px;
  position: absolute;
}

</style>